import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, DatePicker, Input, InputNumber } from 'antd';
import DictCode from '../../components/DictCode';

const FormItem = Form.Item;

class BasicInfo extends Component {
  // 选择有无固定期限
  selectContFixedDate = value => {
    const {
      dispatch,
      addinfo: { empLaborContDto },
    } = this.props;
    dispatch({
      type: 'addinfo/updateModelData',
      payload: {
        isContEndRequired: value === '1',
        empLaborContDto: {
          ...empLaborContDto,
          fixedDeadlnFlag: value,
          contBeginDate: null,
          contEndDate: null,
        },
      },
    });
    
  };

  // 选择有无试用期
  selectContTryDate = value => {
    const {
      dispatch,
      addinfo: { empLaborContDto, },
    } = this.props;
    dispatch({
      type: 'addinfo/updateModelData',
      payload: {
        isTryDateRequired: value === '1',
        empLaborContDto: {
          ...empLaborContDto,
          probtnFlag: value,
          probtnBeginDate: null,
          probtnEndDate: null,
          probtnWage: null,
        },
      },
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      addinfo: { isSocialFlag,contSerType,isDisableCont, isContEndRequired, isTryDateRequired,requestAddBaseDto: { cityId } },
    } = this.props;
    // 页面布局
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };
    return (
      <div>
        <Row gutter={64}>
          {/* {Number(contSerType) !== 1?(
            <Col {...colProps}>
              <FormItem label="合同签署方式">
                {getFieldDecorator('empLaborContDto.contSignWay', {
                rules: [{ message: '请选择' }],
              })(<DictCode dictType="CONT_SIGN_WAY" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
          ):null} */}
          {Number(contSerType) !== 1?(
            <Col {...colProps}>
              <FormItem label="合同类型">
                {getFieldDecorator('empLaborContDto.contType', {
                 rules: [{ required: false, message: '请选择' }],
               })(<DictCode dictType="EMP_CONT_TYPE" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
          ):null}
          <Col {...colProps}>
            <FormItem label="合同签订日期">
              {getFieldDecorator('empLaborContDto.signDate', {
                rules: [{ required:cityId&& +cityId.value===752252&&isSocialFlag, message: '请选择' }],
              })(
                <DatePicker
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  disabled={isDisableCont}
                />
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="是否已签订电子劳动合同">
              {getFieldDecorator('empLaborContDto.electrSignFlag', {
                rules: [{ required:cityId&&  +cityId.value===752252&&isSocialFlag, message: '请选择' }],
              })(<DictCode dictType="YES_NO_FLAG" />)}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="岗位">
              {getFieldDecorator('empLaborContDto.wkJob', {
                rules: [{ required:cityId&&  +cityId.value===752252&&isSocialFlag, message: '最多不超过50字符', max: 50 }],
              })(<Input placeholder="请输入" disabled={isDisableCont} />)}
            </FormItem>
          </Col>
          {Number(contSerType) !== 1?(
            <Col {...colProps}>
              <FormItem label="合同编号">
                {getFieldDecorator('empLaborContDto.contNo', {
                rules: [
                  {
                    required: false,
                    message: '数字与字母组合且最大长度不超过20',
                    pattern: /^[A-Za-z0-9]{1,20}$/,
                    max: 20,
                  },
                ],
              })(<Input placeholder="请输入" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
          ):null}
        </Row>
        
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="有无固定期限">
              {getFieldDecorator('empLaborContDto.fixedDeadlnFlag', {
                rules: [{ required:cityId&&  +cityId.value===752252&&isSocialFlag, message: '请选择' }],
              })(
                <DictCode
                  dictType="ISNULL_FLAG"
                  onSelect={this.selectContFixedDate}
                  disabled={isDisableCont}
                />
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="合同开始日期">
              {getFieldDecorator('empLaborContDto.contBeginDate', {
                rules: [{ required: cityId&& +cityId.value===752252&&isSocialFlag, message: '请选择' }],
              })(
                <DatePicker
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  disabled={isDisableCont}
                />
              )}
            </FormItem>
          </Col>
          <Col {...colProps}>
            <FormItem label="合同结束日期">
              {getFieldDecorator('empLaborContDto.contEndDate', {
                rules: [{ required: isContEndRequired&&cityId&&  +cityId.value===752252, message: '请选择' }],
              })(
                <DatePicker
                  placeholder="请选择"
                  style={{ width: '100%' }}
                  disabled={!isContEndRequired || isDisableCont}
                />
              )}
            </FormItem>
          </Col>
        </Row>
        {Number(contSerType) !== 1?(
          <Row gutter={64}>
            <Col {...colProps}>
              <FormItem label="有无试用期">
                {getFieldDecorator('empLaborContDto.probtnFlag', {
                        rules: [{ required: false, message: '请选择' }],
                      })(
                        <DictCode
                          dictType="ISNULL_FLAG"
                          onSelect={this.selectContTryDate}
                          disabled={isDisableCont}
                        />
                      )}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="试用期开始日期">
                {getFieldDecorator('empLaborContDto.probtnBeginDate', {
                        rules: [{ required: false, message: '请选择' }],
                      })(
                        <DatePicker
                          placeholder="请选择"
                          style={{ width: '100%' }}
                          disabled={!isTryDateRequired || isDisableCont}
                        />
                      )}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="试用期结束日期">
                {getFieldDecorator('empLaborContDto.probtnEndDate', {
                        rules: [{ required: false, message: '请选择' }],
                      })(
                        <DatePicker
                          placeholder="请选择"
                          style={{ width: '100%' }}
                          disabled={!isTryDateRequired || isDisableCont}
                        />
                      )}
              </FormItem>
            </Col>
          </Row>
          ):null}
        <Row gutter={64}>
          <Col {...colProps}>
            <FormItem label="合同期劳动报酬">
              {getFieldDecorator('empLaborContDto.contWage', {
                rules: [
                  {
                    required: cityId&& +cityId.value===752252&&isSocialFlag,
                    message: '请输入小数点不超过2位的数字',
                    pattern: /^-?\d+\.?\d{0,2}$/,
                  },
                ],
              })(
                <InputNumber
                  min={0}
                  max={9999999.99}
                  placeholder="请输入"
                  style={{ width: '100%' }}
                  disabled={isDisableCont}
                />
              )}
            </FormItem>
          </Col>
          {Number(contSerType) !== 1?(
            <Col {...colProps}>
              <FormItem label="试用期劳动报酬">
                {getFieldDecorator('empLaborContDto.probtnWage', {
              rules: [
                {
                  required: false,
                  message: '请输入小数点不超过2位的数字',
                  pattern: /^-?\d+\.?\d{0,2}$/,
                },
              ],
            })(
              <InputNumber
                min={0}
                max={9999999.99}
                placeholder="请输入"
                style={{ width: '100%' }}
                disabled={!isTryDateRequired || isDisableCont}
              />
            )}
              </FormItem>
            </Col>
        ):null}
          {Number(contSerType) !== 1?(
            <Col {...colProps}>
              <FormItem label="工时">
                {getFieldDecorator('empLaborContDto.laborHour', {
                rules: [{ required: false, message: '请选择' }],
              })(<DictCode dictType="WORK_HOURS" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
          ):null} 
          
        </Row>
        {Number(contSerType) !== 1?(
          <Row gutter={64}>
            {/* <Col {...colProps}>
            <FormItem label="岗位">
              {getFieldDecorator('empLaborContDto.wkJob', {
                rules: [{ required: false, message: '最多不超过50字符', max: 50 }],
              })(<Input placeholder="请输入" disabled={isDisableCont} />)}
            </FormItem>
          </Col> */}
            <Col {...colProps}>
              <FormItem label="工作地点">
                {getFieldDecorator('empLaborContDto.wkLoc', {
                rules: [{ required: false, message: '最多不超过100字符', max: 100 }],
              })(<Input placeholder="请输入" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="工作内容">
                {getFieldDecorator('empLaborContDto.wkContent', {
                rules: [{ required: false, message: '最多不超过100字符', max: 100 }],
              })(<Input placeholder="请输入" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
            <Col {...colProps}>
              <FormItem label="是否做入职体检">
                {getFieldDecorator('empLaborContDto.entryMedExamFlag', {
                rules: [{ required: false, message: '请选择' }],
              })(<DictCode dictType="YES_NO_FLAG" disabled={isDisableCont} />)}
              </FormItem>
            </Col>
          </Row>
        ):null}
        
      </div>
    );
  }
}

export default BasicInfo;
